<template>
    <div class="directory-picker">
        <h5>{{title}}</h5>
        <hr>
        <directory-list
            @item-click="directoryToggle"
            @item-init="directoryToggle(arguments[1])"
            :data="$attrs.data"
            :root="$attrs.root"
            :active="$attrs.active"
            :option="{'show-checkbox': true, multiple: true, 'allow-transition': false, 'item-events': {}}"
        ></directory-list>
            
        <div class="card">
            
            <div class="card-body">
                <h5 class="card-title">
                    选择目录数: <small>{{arr.length}}</small>
                </h5>
                <div class="text-right">
                    <button class="btn btn-sm btn-primary" @click="confirm" :disabled="state != 'pending'">确定</button>
                    <button class="btn btn-sm btn-outline-dark" @click="$emit('close')">关闭</button>
                </div>
            </div>
        </div>
          
    </div>
</template>
<script type="text/javascript">
import picker from './picker'
import directoryList from './directory-list'
import Scrollbar from 'smooth-scrollbar'
import vJstree from 'vue-jstree'
import $ from 'jquery'

export default {
    mixins: [picker],
    components: {directoryList},
    data() {
        var vm = this;
        return {
            notifier: $.Deferred().done(function() {
                vm.$emit('close');
            })
        }
    },
    props: {
        confirmHandler: {
            type: Function,
            required: true
        }
    },
    methods: {
        directoryToggle(item, e) {
            if (item.selected) {
                this.add(item);    
            } else {
                this.remove(item);
            }
        }
    },
    created() {
        console.log(this);
    }
}
</script>
<style type="text/css">
.directory-picker {
    height: 100%;
    position: relative;
    padding: 8px;
}

.directory-picker .directory-container {
    max-height: 70vh;
}

.directory-picker .directory-container .list {
    
}
</style>